<template>
  <div class="loginBox">
    <el-row class="loginTop">
      <el-col :span="24">
        <img class="loginImg fl" src="@/assets/image/logo.png" alt="">
        <div class="loginLine fl"></div>
        <div class="loginFont fl">京师壹心心理云平台</div>
      </el-col>
    </el-row>
    <el-row class="loginCenter">
      <el-col :span="14">
        <img src="@/assets/image/login/login.png" alt="">
      </el-col>
      <el-col :span="10">
        <div class="loginCenterLogin">
          <h1>测评系统-学校端</h1>
          <el-form ref="form" :model="form" size="mini">
            <p>账号</p>
            <el-input v-model="form.user" autocomplete="off"></el-input>
            <p>密码</p>
            <el-input v-model="form.password" show-password autocomplete="off"></el-input>
            <el-button class="loginBtn" type="primary" @click="checkFn()">登录</el-button>
          </el-form>
        </div>
        <p class="toStudent"><el-link href="http://student.jsyixin.com" target="_blank">测评系统-学生端<i class="el-icon-right"></i></el-link></p>
      </el-col>
    </el-row>
    <el-row class="loginBottom">
      <p>北京心智计算科技有限公司 联系电话： 400 670 0176 </p>
      <p>备案编号：京ICP备17001131号 </p>
    </el-row>
  </div>
</template>
<script>
import {APILOGIN} from '@/common/api.js'
export default {
  data () {
    return {
      form: {
        user: '',
        password: ''
      }
    }
  },
  methods: {
    checkFn () {
      if (this.form.user === '') {
        this.$message({
          message: '用户名不能为空',
          type: 'warning'
        })
        return false
      }
      if (this.form.password === '') {
        this.$message({
          message: '密码不能为空',
          type: 'warning'
        })
        return false
      }
      this.submitFn()
    },
    submitFn () {
      APILOGIN({
        account: this.form.user,
        password: this.form.password
      }).then((res) => {
        if (res.status === 1) {
          this.$cookies.set('menu', 'index')
          sessionStorage.setItem('user', res.data.user_name)
          sessionStorage.setItem('token', res.data.token)
          sessionStorage.setItem('title', res.data.school_info.title)
          sessionStorage.setItem('role_name', res.data.role_name)
          this.$message({
            message: '登录成功',
            type: 'success'
          })
          this.$router.push({path: '/index'})
        } else {
          this.$message.error(res.msg)
        }
      }).catch((err) => {
        this.$message.error(err.msg)
      })
    }
  }
}
</script>
<style scoped lang="scss">
@import 'src/assets/style/varibles.scss';
.loginBox {
  width: $width;
  height: $height;
  background: url(./../../assets/image/login/bg.jpg) no-repeat center;
  background-size: 100% 100%;
  .loginTop{
    height: 12vh;
    padding: 2vh 2vw;
    box-sizing: border-box;
    div{
      height: 8vh;
      padding: 2vh 2vw;
      box-sizing: border-box;
      .loginImg{
        height: 100%;
        width: auto;
      }
      .loginLine{
        height: 100%;
        width: 2px;
        padding: 0px;
        background-color: #ffffff;
        margin: 0 1vw;
      }
      .loginFont{
        font-size: 16px;
        height: 4vh;
        padding: 0px;
        line-height: 4vh;
        color: #ffffff;
      }
    }
  }
  .loginCenter{
    height: 76vh;
    img{
      width: 100%;
      padding: 15vh 10vw 0;
      box-sizing: border-box;
    }
    .loginCenterLogin{
      background-color: #ffffff;
      margin: 10vh 8vw 1vh;
      box-sizing: border-box;
      border-radius: 10px;
      padding: 1vh 1vw;
      h1{
        width: 100%;
        height: 10vh;
        line-height: 10vh;
        text-align: center;
        font-size: $mainSize;
        color:$mainFontColor;
      }
      p{
        height: 4vh;
        line-height: 4vh;
        color: $secondaryFontColor;
        padding-left: 4px;
        margin-top: 2vh;
        box-sizing: border-box;
      }
      .loginBtn{
        width: 100%;
        margin: 4vh 0;
      }
    }
  }
  .loginBottom{
    width: 100vw;
    height: 12vh;
    padding-top: 5vh;
    text-align: center;
    color: #ffffff;
    p{
      height: 3vh;
      line-height: 3vh;
    }
  }
}
.toStudent{
  text-align: center;
}
.toStudent>a{
  color: #fff;
}
.toStudent>a:hover {
  color: #E6A23C;
}
</style>
